/*
 * @Author: your name
 * @Date: 2021-12-23 13:53:53
 * @LastEditTime: 2021-12-23 19:38:04
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day12 ts 路由 月考\my-app\src\views\login\Login.tsx
 */
import React, { ChangeEvent, Component } from 'react'
import Inputmodule from "./login.module.scss"
import axios from "axios"
import "../../mock/mock"

import {RouteComponentProps} from "react-router-dom"

interface IState{
    name:string
    pwd:string
    [PropsName:string]:string
}

interface IProps extends RouteComponentProps{}

export default class Login extends Component<IProps,IState> {

    state={
        name:"",
        pwd:""
    }

    changeText(e:ChangeEvent){
        this.setState({
            [(e.target as HTMLInputElement).title]:(e.target as HTMLInputElement).value
        })
    }

    changeLogin=async()=>{
        let {name,pwd}=this.state
        // console.log(name,pwd);
        let res=await axios.post("/api/login",{name,pwd})
        console.log(res);
        if(res.data.code===0){
            this.props.history.push({
                pathname:"/Home"
            })
        }else{
            console.log("登录失败");
        }
    }

    render() {
        let {name,pwd}=this.state
        return (
            <div className={Inputmodule.input}>
                <input type="text" value={name} onChange={this.changeText.bind(this)} title='name' placeholder='请输入用户名'/>
                <input type="text" value={pwd} onChange={this.changeText.bind(this)} title='pwd' placeholder='请输入密码'/>
                <button onClick={this.changeLogin}>登录</button>
            </div>
        )
    }
}
